<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:p="http://primefaces.org/ui">
   <h:head id="head">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Remote car monitor!</title>
   </h:head>
   <h:body id="body">
		<h:panelGroup rendered="#{authentication.authenticated}">
			<div>
				Hello, #{authentication.nickname}.
				|
				<a href="remotemonitor.apk">Download mobile app</a>
				|
				<a href="#{authentication.logoutURL}">Sign out</a>
			</div>
			<h:form>
				<p:dataTable id="availableCars" value="#{carsController.availableCars }" 
								var="car" style="width: 500px; margin: 10px 2px 10px 2px;">
					<p:column>
						<f:facet name="header">
							Brand
						</f:facet>    
						<h:outputText value="#{car.brand}"/>
					</p:column>
					<p:column>
						<f:facet name="header">
							Model
						</f:facet>    
						<h:outputText value="#{car.model}"/>
					</p:column>
					<p:column>
						<f:facet name="header">
							Car ID
						</f:facet>    
						<h:outputText value="#{car.id}"/>
					</p:column>
					<p:column>
						<f:facet name="header">
							Operation
						</f:facet>
						<a href="history.jsf?carId=#{car.id}">Show</a>
	            		<p:commandButton oncomplete="deleteCarDialog.show()" image="ui-icon-closethick" style="margin: 2px 2px 2px 10px;"> 
	                		<f:setPropertyActionListener value="#{car}" target="#{carsController.selectedCar}" />  
	            		</p:commandButton>
        			</p:column>
				</p:dataTable>
				<p:commandButton id="carDialogButton" value="Add car" onclick="addCarDialog.show();" type="button" />

			<p:dialog header="Delete car" widgetVar="deleteCarDialog" resizable="false"  
              	width="230" showEffect="explode" hideEffect="explode">  
  				<h:panelGrid columns="2">
        			<p:commandButton value="delete" action="#{carsController.deleteSelectedCar}"
        					update="availableCars" oncomplete="deleteCarDialog.hide()"/>
        			<p:commandButton value="close" onclick="deleteCarDialog.hide()"/>
        		</h:panelGrid>
    		</p:dialog>  
    
			<p:dialog header="Add car" widgetVar="addCarDialog" resizable="false"
				showEffect="explode" hideEffect="explode" height="210" width="400">
				<h:panelGrid columns="2">
					<h:outputLabel value="Brand:" style="font-weight:bold" />
					<p:inputText id="inputBrand" value="#{carsController.newCar.brand }" style="width: 250px" />
					<h:outputLabel value="Model:" style="font-weight:bold" />
					<p:inputText id="inputMode" value="#{carsController.newCar.model }" style="width: 250px" />
					<h:outputLabel value="Description:" style="font-weight:bold" />
					<p:inputTextarea id="inputDescription" value="#{carsController.newCar.description }" style="width: 250px" />
					<br/>
					<p:commandButton id="addCarBtn" value="Add" action="#{carsController.addCar}"
						update="availableCars" oncomplete="addCarDialog.hide();" style="margin-left: 180px;" />
				</h:panelGrid>
			</p:dialog>
		</h:form>
		</h:panelGroup>
		<h:panelGroup rendered="#{not authentication.authenticated}">
			|
			<a href="#{authentication.loginURL}">Sign in</a>
			|
			<a href="remotemonitor.apk">Download mobile app</a>
			|
		</h:panelGroup>
   </h:body>
</html>